<template>
	<view class="app-container apply">
		<!-- <u-cell-group @click="handleCheckApplyType">
			<u-cell title="请假类型" isLink :value="form.startTime || '请选择'" index='1'></u-cell>
			<view class="line"></view>
			<u-cell title="开始日期" isLink :value="form.startTime || '请选择'"></u-cell>
			<u-cell title="结束日期" isLink :value="form.startTime || '请选择'"></u-cell>
			<u-cell title="请假时数" :value="form.total || '请选择'"></u-cell>
			<view class="line"></view>
			<u-cell title="请假原因" isLink :value="form.startTime || '请选择'"></u-cell>
			<view class="line"></view>
			<u-cell title="详细说明" :value="form.startTime || '请选择'"></u-cell>
		</u-cell-group> -->

		<!-- <u-select v-model="visible" :list="list"></u-select> -->
		<view class="form">
			<view class="formItem">
				<view class="formItemLabel">
					请假类型
				</view>
				<view class="formItemValue" @click="handleCheckApplyType">
					{{form.applyType|| ''}}
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="formItem" style="margin-top: 8px;">
				<view class="formItemLabel">
					开始日期
				</view>
				<view class="formItemValue" @click="handleChooseTime('start')">
					{{ form.startTime  ? dayjs(form.startTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="formItem">
				<view class="formItemLabel">
					结束日期
				</view>

				<view class="formItemValue" @click="handleChooseTime('end')">
					{{ form.endTime ?   dayjs(form.endTime).format('YYYY-MM-DD HH:mm:ss') :''}}
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="formItem">
				<view class="formItemLabel">
					请假时数
				</view>
				<view class="formItemValue">
					{{form.total || ''}}
					
				</view>
			</view>
			<view class="formItem" style="margin-top:8px;" @click="show1 = true">
				<view class="formItemLabel">
					请假原因
				</view>
				<view class="formItemValue">、
					{{form.reason || ''}}
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="formItem" style="margin-top:8px;">
				<view class="formItemLabel">
					详细说明
				</view>
				<view class=" space">
					<u--textarea v-model="form.remark" :autoHeight="true" placeholder="请输入" border='bottom'
						height='300rpx' count></u--textarea>
				</view>
			</view>
				<view class="footerBtn">
					<u-button class='cust-style' text="雪月夜"></u-button>
				</view>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="startTimeVisible" @cancel='handleCancel'
			@confirm="(val)=>handleSaveTime(val,'startTime')" :value="defaultValue" mode="datetime"></u-datetime-picker>
		<u-datetime-picker ref="datetimePicker1" :show="endTimeVisible" @cancel='handleCancel'
			@confirm="(val)=>handleSaveTime(val,'endTime')" :value="defaultValueEnd"
			mode="datetime"></u-datetime-picker>
		<u-picker :show="show" :columns="columns" @cancel='show = false' @confirm='handleChange'></u-picker>
		<u-picker :show="show1" :columns="columns2" @cancel='show1 = false' @confirm='handleChange2'></u-picker>
	</view>
</template>

<script>
	import dayjs from '@/utils/dayjs.js'
	export default {
		data() {
			return {
				defaultValue: dayjs().valueOf(),
				defaultValueEnd: dayjs().valueOf(),
				show: false,
				show1: false,
				visible: true,
				startTimeVisible: false,
				endTimeVisible: false,
				timeType: 'start',
				columns: [
					['事假', '年假', '婚嫁', '其他']
				],
				columns2: [
					['事假', '年假', '婚嫁', '其他']
				],
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],

				form: {
					startTime: '',
					endTime: '',
					applyType: '',
					total: '',
					reason: '',
					remark: '',
				}

			};
		},
		methods: {
			handleSaveTime(val, key) {
				console.log(val)
				const {
					value = ''
				} = val
				this.form[key] = dayjs(value).format('YYYY-MM-DD HH:mm:ss')
				if (key === 'endTime') {
					const start = dayjs(this.form.startTime).format('YYYY-MM-DD HH:mm')
					const end = dayjs(this.form.endTime).format('YYYY-MM-DD HH:mm')
					this.form.total = dayjs(end).diff(dayjs(start), 'hours')
				}
				this.startTimeVisible = false
				this.endTimeVisible = false

			},
			handleCancel() {
				this.startTimeVisible = false
				this.endTimeVisible = false
			},
			handleChooseTime(eventType) {
				if (eventType === 'start') {
					return this.startTimeVisible = true
				}
				return this.endTimeVisible = true

			},
			handleCheckApplyType(index) {
				console.log(index)
				this.show = true
			},
			handleChange(val) {
				const {
					value
				} = val
				console.log(value)
				this.form.applyType = value[0]
				this.show = false
			},
			handleChange2(val) {
				const {
					value
				} = val
				console.log(value)
				this.form.reason = value[0]
				this.show1 = false
			}
		}
	}
</script>

<style lang="scss">
	.apply {
		.footerBtn{
			position: fixed;
			bottom: 0;
			left: 0;
			right:0;
			box-sizing: border-box;
			padding: 24px 12px;
			background-color: #fff;
			width: 100%;
			.cust-style{
				background-color:#78A25a;
				color: #fff;
			}
			
		}
	}

	.app-container {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(246, 247, 251);


		.formItem {
			background-color: #fff;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 16px 10px;

			.formItemLable {
				flex-shrink: 0;
			}

			.formItemValue {
				flex: 1;
				font-size: 18px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

		}

		.space {
			flex: 0 0 100% !important;
		}

		.formItem+.formItem {
			border-top: 1px solid #eee;
		}


	}
</style>